{% block sw_sales_channel_products_assignment_modal %}
<sw-modal
    class="sw-sales-channel-products-assignment-modal"
    :title="$tc('sw-sales-channel.detail.productAssignmentModal.title')"
    @modal-close="onCloseModal"
>
    <template #default>
        {% block sw_sales_channel_products_assignment_modal_tabs %}
        <sw-tabs
            class="sw-sales-channel-products-assignment-modal__tabs"
            position-identifier="sw-sales-channel-products-assignment-modal"
            default-item="singleProducts"
        >
            <template #default="{ active }">
                {% block sw_sales_channel_products_assignment_modal_tabs_single_products %}
                <sw-tabs-item
                    name="singleProducts"
                    :title="$tc('sw-sales-channel.detail.productAssignmentModal.singleProducts')"
                    :active-tab="active"
                >
                    {{ $tc('sw-sales-channel.detail.productAssignmentModal.singleProducts') }}
                </sw-tabs-item>
                {% endblock %}

                {% block sw_sales_channel_products_assignment_modal_tabs_categories %}
                <sw-tabs-item
                    name="categories"
                    :title="$tc('sw-sales-channel.detail.productAssignmentModal.categories.title')"
                    :active-tab="active"
                >
                    {{ $tc('sw-sales-channel.detail.productAssignmentModal.categories.title') }}
                </sw-tabs-item>
                {% endblock %}

                {% block sw_sales_channel_products_assignment_modal_tab_dynamic_product_groups %}
                <sw-tabs-item
                    name="dynamicProductGroups"
                    :title="$tc('sw-sales-channel.detail.productAssignmentModal.dynamicProductGroups.title')"
                    :active-tab="active"
                >
                    {{ $tc('sw-sales-channel.detail.productAssignmentModal.dynamicProductGroups.title') }}
                </sw-tabs-item>
                {% endblock %}
            </template>

            <template #content="{ active }">
                <div
                    class="sw-sales-channel-products-assignment-modal__content"
                    :height="tabContentHeight"
                >
                    {% block sw_sales_channel_products_assignment_modal_tab_content_single_products %}
                    <sw-sales-channel-products-assignment-single-products
                        ref="product"
                        v-hide="active === 'singleProducts'"
                        :sales-channel="salesChannel"
                        :container-style="productContainerStyle"
                        @selection-change="onChangeSelection"
                    />
                    {% endblock %}

                    {% block sw_sales_channel_products_assignment_modal_tab_content_categories %}
                    <sw-sales-channel-product-assignment-categories
                        ref="category"
                        v-hide="active === 'categories'"
                        :sales-channel="salesChannel"
                        :container-style="categoryContainerStyle"
                        @selection-change="onChangeSelection"
                        @product-loading="setProductLoading"
                    />
                    {% endblock %}

                    {% block sw_sales_channel_products_assignment_modal_tab_content_dynamic_product_groups %}
                    <sw-sales-channel-products-assignment-dynamic-product-groups
                        ref="productGroup"
                        v-hide="active === 'dynamicProductGroups'"
                        :sales-channel="salesChannel"
                        :container-style="productGroupContainerStyle"
                        @selection-change="onChangeSelection"
                        @product-loading="setProductLoading"
                    />
                    {% endblock %}
                </div>
            </template>
        </sw-tabs>
        {% endblock %}
    </template>

    <template #modal-footer>
        {% block sw_sales_channel_products_assignment_modal_footer_cancel %}
        <mt-button
            class="sw-sales-channel-products-assignment-modal__close-button"
            size="small"
            variant="secondary"
            @click="onCloseModal"
        >
            {{ $tc('global.default.cancel') }}
        </mt-button>
        {% endblock %}

        {% block sw_sales_channel_products_assignment_modal_footer_submit %}
        <mt-button
            size="small"
            variant="primary"
            :is-loading="isAssignProductLoading || isProductLoading"
            @click="onAddProducts"
        >
            {{ $tc('sw-sales-channel.detail.products.buttonAddProducts', { productCount: productCount }, productCount) }}
        </mt-button>
        {% endblock %}
    </template>
</sw-modal>
{% endblock %}
